<template>
  <div class="header">
    <div class="tools">
      <i @click="erp.open()" class="icon flash iconfont icon-phone"></i>
      <Erp ref="erp" />
      <i @click="printer.open()" class="icon flash iconfont icon-print"></i>
      <Printer ref="printer" />
      <el-popover placement="bottom">
        <template #reference>
          <i class="icon flash iconfont icon-earth"></i>
        </template>
        <Language />
      </el-popover>
      <el-popconfirm
        :title="lang.t('alert.logout')"
        @confirm="accountModel.logout()"
        confirmButtonType="danger"
        placement="bottom-end"
        hideIcon
      >
        <template #reference>
          <i class="icon flash iconfont icon-switch error"></i>
        </template>
      </el-popconfirm>
    </div>
    <img v-if="user.user.logo" :src="app.img(user.user.logo)" class="logo" />
    <div class="name" >
      {{ user.checkout.name }}
    </div>
    <div class="account">
      {{ lang.t('page.account.user') }}: {{ user.name }}
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import app from '@/app'
import accountModel from '@/model/account'

import Language from '@/components/language'
import Printer from './printer'
import Erp from './erp'

export default {
  components: {
    Language,
    Printer,
    Erp
  },
  props: ['user'],
  setup() {
    const printer = ref()
    const erp = ref()

    return {
      app,
      lang: app.lang,
      accountModel,
      printer,
      erp
    }
  }
}
</script>